<template>
	<view class="sign">
		<component :is="current.component" :subPlanId="subPlanId" v-model:onMore="onMore" />
		<view class="sign-tabs">
			<view class="sign-item" v-for="(item, k) in tabList" :key="k" @click="changeTab(item)">
				<uv-icon :name="current.type == item.type ? item.activeIcon : item.icon" size="40rpx" space="10rpx"
					:label="item.label" label-pos="bottom"
					:label-color="current.type == item.type ? '#212121' : '#BDBDBD'" label-size="24rpx" />
			</view>
		</view>
	</view>
</template>
<script setup>
	import {
		markRaw,
		ref
	} from "vue";
	import {
		onLoad,
		onReachBottom
	} from "@dcloudio/uni-app";

	import Clock from "@/pages/sign/cp/Clock.vue";
	import Count from "@/pages/sign/cp/Count.vue";

	import sign from "@/static/sign/icon_sign.png";
	import sign1 from "@/static/sign/icon_sign1.png";
	import count from "@/static/sign/icon_count.png";
	import count1 from "@/static/sign/icon_count1.png";

	const current = ref({}); // 当前选中
	const subPlanId = ref(''); // 任务id
	const onMore = ref(false); // 上拉加载
	const tabList = ref([{
			type: 1,
			label: "打卡",
			icon: sign,
			activeIcon: sign1,
			component: markRaw(Clock)
		},
		{
			type: 2,
			label: "统计",
			icon: count,
			activeIcon: count1,
			component: markRaw(Count)
		},
	]);

	onLoad((e) => {
		let type = e.type || 1;
		subPlanId.value = e.subPlanId;
		let row = tabList.value.find((i) => i.type == type);
		current.value = row ? row : tabList.value[0];
	});

	onReachBottom(() => {
		onMore.value = true;
	})

	// tab切换
	const changeTab = (item) => {
		current.value = item;
	};
</script>
<style lang="scss" scoped>
	.sign {
		.sign-tabs {
			position: fixed;
			bottom: 0;
			left: 0;
			right: 0;
			display: flex;
			justify-content: space-around;
			align-items: center;
			background-color: #fff;
			height: 120rpx;
			box-shadow: 0 0 30rpx 2rpx rgba(94, 94, 94, 0.16);
			border-radius: 60rpx 60rpx 0 0;
			z-index: 9;

			view {
				flex: 1;
			}
		}
	}
</style>